<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        .aa{
            color: red;
        }
        .bb{
            background: #ccc;
        }
        .cc{
            font-size: 30px;
        }

        .success{
            color: green;
        }
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 动态的属性绑定 -->
        <!-- <img v-bind:src="url"> -->
        <img :src="url" :title="title" v-bind="{width:width,height:height}">
        <hr>

        <!-- boolean类型的属性，常见：disabled、readonly、selected、checked -->
        <input type="text" value="tom" :disabled="flag">
        <hr>

        <!-- class属性的绑定 -->
        <!-- 取值为字符串 -->
        <p :class="classStr">hello</p>
        <!-- 取值为数组 -->
        <p :class="classArr">hello</p>
        <!-- 取值为对象，语法：{key:value}，key表示样式名，value为boolean，表示是否应用该样式 -->
        <p :class="classObj">hello</p>

        <input type="text" :class="{success:flag,error:!flag}" @input="check($event.target.value)">
        <input type="text" :class="className" @input="check($event.target.value)">
        <hr>

        <!-- 修饰符 -->
        <!-- 此时username、haha是html属性 -->
        <p id="p1" :username.prop="'tom'" haha="哈哈" @click="getInfo($event.target)">用户信息</p>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
           url:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
           title:'哈哈哈哈',
           width:'200px',
           height:'200px', 
           flag:null,
           classStr:'bb cc',
           classArr:['bb','cc'],
           classObj:{aa:true,bb:false},
           className:'',
        },
        methods:{
            check(value){
                // this.flag = value.length>=6 && value.length<=10
                
                if(value.length>=6 && value.length<=10){
                    return this.className = 'success'
                }
                this.className = 'error'
            },
            getInfo(target){
                console.log(target) // DOM对象
                // 获取HTML标签的属性
                console.log(target.getAttribute("username"))
                console.log(target.getAttribute("haha"))

                console.log('---------------------------------')

                console.log(target.username)
                console.log(target.haha)
            }
        }
    })
</script>
</html>